/*
 * @Author: jjjjwei 1506865174@qq.com
 * @Date: 2022-08-04 11:40:09
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @LastEditTime: 2022-08-17 10:45:29
 * @FilePath: \react\react-routemanage\src\page\Home.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Button,  Form, Input,message,Segmented } from 'antd';
import React,{useState} from 'react';
import {useNavigate} from 'react-router-dom'
import {useDispatch} from 'react-redux'
import {userLogin} from './../store/features/userSlice';
import {unwrapResult} from '@reduxjs/toolkit'
import { LockOutlined, UserOutlined,QrcodeOutlined } from '@ant-design/icons';
import {QRCodeSVG} from 'qrcode.react';
import './Login.css'
function Login(props){
  const navigate = useNavigate();
  const diaptch = useDispatch();
  const [display,setDisplay] = useState('true')
  const onFinish = (values) => {
    let user ={
      account:values.userName,
      password:values.userPwd
    }
    diaptch(userLogin(user)).then(unwrapResult).then((data)=>{
      if(data.returnCode===200){
        message.success("登录成功");
        navigate("/home/home");
      }else{
        message.warning("登录失败");
      }

  }).catch((err)=>{
    message.error("登录出错");
  });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const loginRender = (value)=>{
    if(value==='QrCode'){
      setDisplay('false')
    }else{
      setDisplay('true')
    }
  }
  const forgotpwd = ()=>{
    message.warning('请联系管理员')
  }
  return (
    <div id='content'>
    <div className='login'>
          <h2>BPM管理系统登录</h2>
          <Segmented
          className='segmented' 
          options={[{ label: '账号登录',
                      value: 'account',
                      icon: <UserOutlined />,
                    },
                    {
                      label: '二维码登录',
                      value: 'QrCode',
                      icon: <QrcodeOutlined />,
                    }]} 
            block='true'
            onChange={loginRender}
            />            
          <Form
          className={display==='false'?"active":""}
          name="basic"
          wrapperCol={{
            offset:6,
            span: 12,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            name="userName"
            rules={[
              {
                required: true,
                message: '请输入账号!',
              },
            ]}
          >
            <Input prefix={<UserOutlined  />} placeholder="账号" />
          </Form.Item>

          <Form.Item
            name="userPwd"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
          >
            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="密码" />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 6,
              span: 12,
            }}>
            <Button htmlType="submit" className="login-form-button">登录</Button>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 11,
              span: 13,
            }}>
            <span className="login-form-forgot" onClick={forgotpwd}>
            忘记密码?
          </span>
          </Form.Item>
        </Form>
        <div className={display==='false'?"QrCode":"active"}>
        <QRCodeSVG value="https://reactjs.org/" />
          <p>请使用建筑施工BPM管理平台APP扫描二维码登录从BPM首页右上角「扫一扫」开始扫描</p>
        </div>
    </div>
    </div>
  );
};

export default Login;

